import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components'
import { staticUrl } from '@/utils'
import { connect } from 'react-redux'
import {getLeaderStatus} from '@/api/distribution'
import classnames from 'classnames'
import './index.scss'
const DialogBg = staticUrl('/img/distribution/dialog_icon_bg.png')
const stepFirst = staticUrl('/img/distribution/v5/1.png')
const stepSecond = staticUrl('/img/distribution/v5/2.png')
const stepThird = staticUrl('/img/distribution/v5/3.png')
const stepFourth = staticUrl('/img/distribution/v5/4.png')
const stepFine = staticUrl('/img/distribution/v5/5.png')
const Share = staticUrl('/img/distribution/v5/share.png')

interface State{
  store:any,
  staff:any,
  order:any,
	preLoad:boolean,
	allNumber:number,
	recommendId:any,
	mode:number
}

@connect<any>(({ location, car }) => ({ storeInfo: location.storeLocation, car: car.carInfo.currentCar }))
class Adviser extends Component<any> {
    $instance = getCurrentInstance();
    constructor() {
      super(...arguments)
      this.state = {
        staff: [],
        order: {},
              preLoad:false,
              allNumber:0,
              mode:0, // 默认都是为0 ，为1不展示申请按钮
      }
    }
    state: State
    componentDidMount() {
          const { mode } = this.$instance.router.params
          this.setState({
              mode:mode || 0
          },()=>{
              this.initPages()
          })

    }

    UNSAFE_componentWillReceiveProps() {
    }
    private car: ICar | {} = {}

    initPages(){
		let { mode } = this.state
		if( mode == 0){ // 分享入口或者其他点击进入场景
			Taro.showLoading({
				title: '加载中...',
				mask: true
			})
			getLeaderStatus().then(res=>{
				let { data } = res.data
				console.log('data',data)
				let {status,reason,allNumber} = data
				if([0,2].includes(+status)){ //未申请、待审核、未通过
					Taro.navigateTo({
						url: `/pages/distribution/apply/index?status=${status}&reason=${reason}`
					})
					return
				}else if([-1].includes(+status)){ // 未申请
					this.setState({
						preLoad:true,
						allNumber
					})
				}else{ // 已通过的跳转车险团长个人中心页面
					let path = '/distribution/user'
					// let path = 'http://localhost:8080/#/distribution/user'
					Taro.navigateTo({
						url: `/pages/webview/index/index?path=${path}`
					})
				}
			}).finally(()=>{
				Taro.hideLoading()
			})
		}else if(mode ==1){ // 车险团长主页点击进入
			this.setState({
				preLoad:true,
			})
		}
	}


    onShareAppMessage() {
		let  {recommendId='',distributionLeaderId=''} = this.$instance.router.params
    return {
      title: `邀请好友加入团长`,
			path:`pages/distribution/index/index?distributionLeaderId=${distributionLeaderId}&recommendId=${recommendId}`,
      imageUrl: Share
    }
  }


    /**
	* 立即申请
	**/
    gotoApply() {
          let {recommendId=''} = this.$instance.router.params
          const USERINFO = Taro.getStorageSync('IS_USERINFO')
          console.log('USERINFO',USERINFO)
          let query = {
              mobile:USERINFO.mobile,
              recommendId:recommendId
          }
          Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/distribution/user'}&query=${JSON.stringify(query)}`})
    }

    /**
	* 渲染视图
	**/
    mainView() {
      const { allNumber,mode } = this.state
      return (
              <View className='wrap'>
                  {/* 门店信息 */}
                  <View className={classnames('distribute', {
            'no-apply-btn': mode == 1
          })}>
                      <View className="distribute-step">
                          <Image src={stepFirst}  mode='widthFix' className="step-img step-img-1"></Image>
                      </View>
                      <View className="distribute-step">
                          <Image src={stepSecond} mode='widthFix' className="step-img step-img-2"></Image>
                      </View>
                      <View className="distribute-step">
                          <Image src={stepThird} mode='widthFix' className="step-img step-img-3"></Image>
                      </View>
                      <View className="distribute-step">
                          <Image src={stepFourth}  mode='widthFix' className="step-img step-img-4"></Image>
                      </View>
                      <View className="distribute-step">
                          <Image src={stepFine} mode='widthFix' className="step-img step-img-5"></Image>
                      </View>

                  </View>
                  <View></View>
                  {
                      mode == 0 ? (<View className="distribute-fixed">
                          <View className="distribute-fixed--tips">
                              <View className="dialog-box">
                                      <Text className="fixed-tips--txt">已有{allNumber}人申请</Text>
                                      <Image src={DialogBg} className="dialog-bg"></Image>
                              </View>
                          </View>
                          <View className="distribute-fixed--btn" onClick={this.gotoApply}>立即申请</View>
                  </View>) : null
                  }

              </View>
      )
    }



    render () {
      const { preLoad } = this.state
      return (
              <View>
              {
                  preLoad && this.mainView()
              }
              </View>
      )
    }
}
export default Adviser
